<template>
  <div>
    setup:
    {{count}}
    {{howCount}}
    {{state.a}}
    <button @click="addCount">button</button>
    {{context}}
    {{props}}

    <el-button>Default</el-button>
    <el-button type="primary" :icon="Edit">123</el-button>
  </div>
</template>

<script setup>
  import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'

  const props = defineProps({
    msg: String,
  })

  const count = ref(0); //不用 return ，直接在 templete 中使用
  const count2 = ref(10); //不用 return ，直接在 templete 中使用

  const addCount=()=>{ //定义函数，使用同上 
      count.value++; 
      count2.value++; 
      state.a++; 
  } 

  //定义计算属性，使用同上
  const howCount=computed(()=>"现在count值为："+count.value);

  //定义监听，使用同上 //...some code else 
  watchEffect((a)=>{
    console.log(count.value)
    console.log(count2.value)
  }); 

  const state = reactive({
    a:10,
    b:20,
    time:''
  })

  onMounted(() => {
    console.log('onMounted');
  })
  onUnmounted(() => {
    console.log('onUnmounted');
  })
</script>

<style lang="scss" scoped>

</style>